<template>
  <div class="user-box">
    <div class="container-fluid">
      <div class="container">
        <el-row class="flex-center">
          <el-col :span="8" class="view flex-center">
            <div style="width:80%">
              <login-view v-if="showView === 'login'"></login-view>
              <register-view v-if="showView === 'register'"></register-view>
              <forget-pass v-if="showView === 'forgetPass'"></forget-pass>
            </div>
          </el-col>
        </el-row>
      </div>
    </div>
  </div>
</template>

<script>
import loginView from './subpage/login'
import registerView from './subpage/register'
import forgetPass from './subpage/forgetPass'
export default {
  components: {
    loginView,
    registerView,
    forgetPass,
  },
  computed: {
    showView() {
      return this.$store.getters.view.showView
    },
  },
  data() {
    return {
      // TODO:login:用户登录;register:新用户注册;forgetPass:找回密码
      // showView: 'login',
    }
  },
}
</script>

<style lang="less" scoped>
@import './common/index.less';
.user-box {
  .userBox();
}
</style>
